<template>
    <div class="home" id="radar"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    mounted() {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            echarts.init(document.getElementById("radar")).setOption({
                title: {
                    text: "客户满意度",
                    textStyle: {
                        color: "#B1E2FE",
                        fontSize: "14px",
                    },
                },

                // legend: {
                //     data: ['Allocated Budget', 'Actual Spending']
                // },
                // backgroundColor: "rgba(0,0,0,0.2)",
                radar: {
                    //图形大小
                    radius: "50%",
                    // shape: 'circle',
                    indicator: [
                        { name: "客户服务78", max: 100 },
                        { name: "安全管理74", max: 100 },
                        { name: "车辆管理64", max: 100 },
                        { name: "清洁卫生77", max: 100 },
                        { name: "绿化养护82", max: 100 },
                        { name: "公共设施维护75", max: 100 },
                        { name: "入户维护76", max: 100 },
                        { name: "装修管理70", max: 100 },
                        { name: "社区文化活动77", max: 100 },
                        { name: "物业人员79", max: 100 },
                    ],
                },
                series: [
                    {
                        name: "Budget vs spending",
                        type: "radar",
                        data: [
                            {
                                value: [78, 74, 64, 77, 82, 75, 76, 70, 77, 79],
                                name: "Allocated Budget",
                            },
                            {
                                value: [79, 77, 68, 78, 83, 76, 77, 71, 78, 80],
                                name: "Actual Spending",
                            },
                        ],
                    },
                ],
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.home {
    width: 100%;
    height: 170px;
}
</style>